<template>
  <div class="main-content">
    <h1 class="title">教学实验平台</h1>
    <div class="login">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
        autocomplete="off"
        @finish="handleSubmit"
      >
        <a-form-item label="账户：" name="username">
          <a-input v-model:value="formState.account" />
        </a-form-item>

        <a-form-item label="密码：" name="password">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="footer">
          <a-button type="primary" html-type="submit">登录</a-button>
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="
              () => {
                router.push({ name: 'home' });
              }
            "
            >取消</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { userLogin } from "@/api/methods/userReq";
import router from "@/router/router";
import { Message } from "@/utils/message";
import { userInfoJson } from "@/utils/userInfo";
import { useLocalStorage } from "@vueuse/core";
import { reactive } from "vue";
interface FormState {
  account: string;
  password: string;
}
const formState = reactive<FormState>({
  account: "admin",
  password: "123",
});
const handleSubmit = async () => {
  // 点击登录按钮 注册
  const res = await userLogin(formState);
  if (res.code == 20000) {
    Message("success", "登陆成功", () => {
      const token = useLocalStorage<String>("token", "");
      userInfoJson.value = JSON.stringify(res.data);
      token.value = res.data.token;
      router.push({ path: "/home" });
    });
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.main-content {
  .title {
    position: absolute;
    top: 200px;
  }
  display: flex;
  width: 100%;
  height: calc(100vh - 64px - 16px - 28px - 16px - 16px);
  justify-content: center;
  align-items: center;
  .login {
    padding-top: 50px;
    height: 344px;
    width: 544px;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 20px;
  }
}
</style>
